<template>
  <view class="container">
    <!-- 个人的动态 -->
    <view class="itme">
      <view class="header">
        <image @click="gouserhome(obj.user_id)" :src="img_url + obj.avatar" style="width: 88rpx; height: 88rpx; border-radius: 50%" mode="aspectFill"></image>
        <view style="padding-left: 16rpx">
          <view class="topright">
            <text style="font-weight: 500; font-size: 32rpx; color: #151515; padding-right: 12rpx">{{ obj.nickname }}</text>
            <image
              style="width: 28rpx; height: 28rpx; vertical-align: middle"
              :src="obj.gender == 1 ? '../../static/dynamicimg/boy.png' : '../../static/dynamicimg/gril.png'"
              mode=""
            ></image>
          </view>
          <view style="font-weight: 400; font-size: 24rpx; color: #666666">{{ obj.pushtime + ' · ' + obj.address }}</view>
        </view>
      </view>
      <view
        style="
          font-weight: 500;
          font-size: 28rpx;
          color: #151515;
          width: 670rpx;
          text-overflow: -o-ellipsis-lastline;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 6;
          -webkit-box-orient: vertical;
          margin-top: 24rpx;
        "
      >
        {{ obj.content }}
      </view>
      <!-- 图片视频 -->
      <view style="margin-top: 20rpx">
        <firstimg :list="obj.images"></firstimg>
      </view>
      <!-- 点赞、评论 -->
      <view style="display: flex; justify-content: flex-end">
        <view style="display: flex; align-items: center">
          <view @click="changelike">
            <image
              :src="obj.is_like == 0 ? '../../static/dynamicimg/like.png' : '../../static/dynamicimg/likeact.png'"
              style="width: 28rpx; height: 28rpx; vertical-align: middle; margin-right: 14rpx"
              mode=""
            ></image>
            <text>{{ obj.like_num }}</text>
          </view>
          <view style="margin-left: 40rpx">
            <image src="../../static/dynamicimg/pinglun.png" style="width: 28rpx; height: 28rpx; vertical-align: middle; margin-right: 14rpx" mode=""></image>
            <text>{{ obj.comment_num }}</text>
          </view>
        </view>
      </view>
    </view>
    <!-- 评论列表 -->
    <view class="pinglun">
      <veiw class="title">评论（{{ obj.list.length + ')' }}</veiw>
      <!-- 用户评论 -->
      <view class="xunhuan" v-for="(item, index) in obj.list" :key="item.id">
        <view class="worditem">
          <image :src="img_url + item.avatar" @click="gouserhome(item.user_id)" style="width: 80rpx; height: 80rpx; border-radius: 50%" mode=""></image>
          <view class="userinfo">
            <view style="font-weight: 500; font-size: 28rpx; color: #666666">{{ item.nickname }}</view>
            <view style="font-weight: 400; font-size: 28rpx; color: #151515">{{ item.comment }}</view>
            <view style="font-size: 24rpx; color: #cccfdb">{{ item.pushtime }}</view>
          </view>
          <view style="font-weight: 400; font-size: 24rpx; color: #666666" @click="huifu(item)">回复</view>
        </view>
        <view class="second" v-if="item.row.length != 0">
          <view v-for="item2 in item.row" :key="item2.id" @click="huifu2(item2)" style="font-weight: 400; font-size: 24rpx; color: #333333; margin-bottom: 10rpx">
            {{ item2.nickname + ': ' + item2.comment }}
          </view>
          <!-- <view style="font-weight: 400; font-size: 24rpx; color: #333333">安稳：我也要安排上</view> -->
        </view>
      </view>
    </view>
    <!-- 自己评论 -->
    <!-- 站位盒子 -->
    <view style="width: 100%; height: 150rpx"></view>
    <view style="position: fixed; bottom: 68rpx; left: 30rpx">
      <input
        :focus="focus"
        placeholder="说点什么..."
        type="text"
        @confirm="pinglun"
        v-model="comment"
        style="
          width: 690rpx;
          height: 76rpx;
          background: #f8f8f8;
          border-radius: 100rpx 100rpx 100rpx 100rpx;
          padding-left: 30rpx;
          font-weight: 400;
          font-size: 24rpx;
          color: #999999;
        "
      />
    </view>
  </view>
</template>

<script>
import dayjs from 'dayjs';
export default {
  data() {
    return {
      focus: false,
      islike: true,
      id: '',
      obj: {},
      comment: '',
      firstcommonid: '', // 一级评论id
      secondconnonid: '', // 二级评论id
      img_url: this.img_url
    };
  },
  onLoad(opt) {
    if (opt.id) {
      console.log(opt.id);
      this.id = opt.id;
    }
    this.getdetail();
  },
  methods: {
    //跳转用户首页
    gouserhome(id) {
      uni.navigateTo({
        url: '/dynamic/userhome/userhome?userid=' + id
      });
    },
    // 几秒前
    timeAgo(timestamp) {
      const current = Date.now();
      const previous = new Date(timestamp);
      const seconds = Math.floor((current - previous) / 1000);
      let interval = Math.floor(seconds / 31536000);

      if (interval >= 1) {
        return interval + ' 年前';
      }
      interval = Math.floor(seconds / 2592000);
      if (interval >= 1) {
        return interval + ' 个月前';
      }
      interval = Math.floor(seconds / 86400);
      if (interval >= 1) {
        return interval + ' 天前';
      }
      interval = Math.floor(seconds / 3600);
      if (interval >= 1) {
        return interval + ' 小时前';
      }
      interval = Math.floor(seconds / 60);
      if (interval >= 1) {
        return interval + ' 分钟前';
      }
      return Math.floor(seconds) + ' 秒前';
    },
    async changelike() {
      this.obj.is_like = !this.obj.is_like;
      await this.http('/dynamic/operate', {
        dynamic_id: this.id
      });
      this.getdetail();
    },
    pinglun() {
      this.focus = false;
      //评论动态
      if (this.comment == '') {
        return;
      }
      if (this.firstcommonid == '' && this.secondconnonid == '') {
        this.http('/dynamic/comment', {
          comment: this.comment,
          dynamic_id: this.id,
          comment_id: 0,
          first_comment_id: 0
        }).then((res) => {
          console.log('评论动态', res);
          this.getdetail();
        });
      }
      if (this.firstcommonid != '') {
        this.http('/dynamic/comment', {
          comment: this.comment,
          dynamic_id: this.id,
          comment_id: this.firstcommonid,
          first_comment_id: 0
        }).then((res) => {
          console.log('评论动态', res);
          this.firstcommonid = '';
          this.getdetail();
        });
      }
      this.comment = '';
      this.getdetail();
    },
    huifu(item) {
      console.log(item);
      this.firstcommonid = item.id;
      this.focus = true;
    },
    huifu2(item2) {
      this.secondconnonid = item2.id;
      this.focus = true;
    },
    async getdetail() {
      const res = await this.http('/dynamic/details', {
        dynamic_id: this.id
      });
      console.log('动态详情', res);
      this.obj = res.data;
      this.obj.pushtime = this.timeAgo(this.obj.createtime * 1000);
      if (this.obj.list.length != 0) {
        this.obj.list.forEach((item) => {
          item.pushtime = this.timeAgo(item.createtime * 1000);
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  box-sizing: border-box;
  padding: 0 30rpx;
  .itme {
    width: 690rpx;
    border-bottom: 2rpx solid #e8e8e8;
    padding-bottom: 34rpx;
    .header {
      display: flex;
      .topright {
      }
    }
  }
  .pinglun {
    .title {
      font-weight: 400;
      font-size: 28rpx;
      color: #151515;
    }
    .xunhuan {
      .worditem {
        display: flex;
        // align-items: center;
        margin-top: 32rpx;
        justify-content: space-between;
        .userinfo {
          flex: 1;
          padding: 0 16rpx;
        }
      }
      .second {
        box-sizing: border-box;
        width: 586rpx;
        background: #f8f8f8;
        border-radius: 10rpx 10rpx 10rpx 10rpx;
        padding: 16rpx 32rpx;
        margin-left: 126rpx;
        margin-top: 16rpx;
      }
    }
  }
}
</style>
